<%@page pageEncoding="UTF-8" isELIgnored="false" session="false" import="burubaka.BurubakaConstants"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<div class="btnArea">
	<a href="javascript:void(0);" id="regTemp" class="btn"><span><fmt:message key="btn.regist" /></span></a>
	<a href="javascript:void(0);" id="searchTemp" class="btn btnMiddle"><span><fmt:message key="btn.search.default" /></span></a>
	<a href="javascript:void(0);" id="clearTemp" class="btn"><span><fmt:message key="btn.clear" /></span></a>
</div>
<div id="betTemplate" class="betTemplate">
<c:if test="${betTempDispFlg==true}">
<fmt:message key="label.template.name"/>：<input type="text" name="name" id="name" >
</c:if>
</div>
<div style="height:35px;margin-top:5px;">
<div class="left"><fmt:message key="label.wager"/>：<input type="text" name="betTempMoney" id="betTempMoney" class="currency">00</div>
<a href="javascript:void(0);" id="setBetMoney" class="btn braek"><span><fmt:message key="btn.set" /></span></a>
</div>
<div id="betTmpQuinellaArea" >
	<div><fmt:message key="label.quinella"/></div>
	<a href="javascript:void(0);" class="btn addTemp"><span><fmt:message key="btn.add" /></span></a>
	<a href="javascript:void(0);" class="btn btnMiddle delLTemp"><span><fmt:message key="btn.delete.last.line" /></span></a>
</div>
<div id="betTmpExactaArea" >
	<div><fmt:message key="label.exacta"/></div>
	<a href="javascript:void(0);" class="btn addTemp"><span><fmt:message key="btn.add" /></span></a>
	<a href="javascript:void(0);" class="btn btnMiddle delLTemp"><span><fmt:message key="btn.delete.last.line" /></span></a>
</div>
<div id="betTmpTrioArea" >
	<div><fmt:message key="label.trio"/></div>
	<a href="javascript:void(0);" class="btn addTemp"><span><fmt:message key="btn.add" /></span></a>
	<a href="javascript:void(0);" class="btn btnMiddle delLTemp"><span><fmt:message key="btn.delete.last.line" /></span></a>
	<div style="height: 25px;"></div>
</div>
<div id="betTmpTrifectaArea" >
	<div><fmt:message key="label.trifecta"/></div>
	<a href="javascript:void(0);" class="btn addTemp"><span><fmt:message key="btn.add" /></span></a>
	<a href="javascript:void(0);" class="btn btnMiddle delLTemp"><span><fmt:message key="btn.delete.last.line" /></span></a>
	<div style="height: 25px;"></div>
</div>
<div style="clear: both;"></div>
<hr>
<div><span id="total" class="currency">0</span>円</div>
<fmt:message key="message.infomatio.total.amaount"/>
<fmt:message key="message.infomatio.max.bet">
	<fmt:param value="<%=BurubakaConstants.MAX_BET %>"/>
</fmt:message>
<script type="text/JavaScript">
var url = "/mypage/betTemplate";
var betTemlateLine = '<div class="betTemplateL">' 
	+'￥<input type = "text" class="currency wager" name="wager">00'
	+'<select size="1" name="betClass" class="betClass"></select>'
	+'<select size="1" name="mark1" class="mark1"></select>'
	+'<select size="1" name="mark2" class="mark2"></select>'
	+'<select size="1" name="mark3" class="mark3"></select>'
	+'</div>';

var betTemlateWLine = '<div class="betTemplateL">' 
	+'<select size="1" name="mark1" class="mark1"></select>'
	+'<select size="1" name="mark2" class="mark2"></select>'
	+'<input type = "text" class="currency wager" name="wager">00円'
	+'<input type="hidden" name="betClass" class="betClass">'
	+'</div>';

var betTemlateTLine = '<div class="betTemplateL">' 
	+'<select size="1" name="mark1" class="mark1"></select>'
	+'<select size="1" name="mark2" class="mark2"></select>'
	+'<select size="1" name="mark3" class="mark3"></select>'
	+'<input type = "text" class="currency wager" name="wager">00円'
	+'<input type="hidden" name="betClass" class="betClass">'
	+'</div>';

	
$(function(){
	init_betTemplate();
	
	//追加クリックイベント
	$(".addTemp").bind("click",addTemp_click);
	//登録クリックイベント
	$("#regTemp").bind("click",regTemp_click);
	//デフォルト取得クリックイベント
	$("#searchTemp").bind("click",searchTemp_click);
	//クリアクリックイベント
	$("#clearTemp").bind("click",clearTemp_click);
	//changeイベント
	$(".betClass").bind("change",betClass_change);
	//1行削除クリックイベント
	$(".delLTemp").click(function(e){
		var slector = $(this).closest('div');
		slector.find(".betTemplateL:last").remove();
		total();
	});
	//金額設定クリックイベント
	$("#setBetMoney").click(function(e){
		$(".wager").val($("#betTempMoney").val());
		total();
	});
	$("#betTempMoney").attr("maxlength","2");
});

//初期表示
function init_betTemplate(e){
	query = {};
	query[REQKEY_COMMAND] = REQKEY_COMMAND_INIT;
	b_ajax(url,query,displayBetTmplate);
}

//追加ボタンクリック
function addTemp_click(e){
	if($(".betTemplateL").length >= <%=BurubakaConstants.MAX_BET %>){
		<fmt:message key="message.warn.max.add" var="maxAddMsg"/>
		$("#message").text("${maxAddMsg}");
		setTimeout("clear()",5000);
		return;		
	}
	
	var slector = $(this).closest('div');
	if(slector.attr("id") == "betTmpQuinellaArea"){
		slector.append(betTemlateWLine);
		slector.find(".betClass:last").val("<%=BurubakaConstants.BET_CLASS_QUINELLA[0] %>");
	}else if(slector.attr("id") == "betTmpExactaArea"){
			slector.append(betTemlateWLine);
			slector.find(".betClass:last").val("<%=BurubakaConstants.BET_CLASS_EXACTA[0] %>");
	}else if(slector.attr("id") == "betTmpTrioArea"){
		slector.append(betTemlateTLine);
		slector.find(".betClass:last").val("<%=BurubakaConstants.BET_CLASS_TRIO[0] %>");
	}else if(slector.attr("id") == "betTmpTrifectaArea"){
		slector.append(betTemlateTLine);
		slector.find(".betClass:last").val("<%=BurubakaConstants.BET_CLASS_TRIFECTA[0] %>");
	}
	slector.find(".mark1:last").append(option_mark);
	slector.find(".mark2:last").append(option_mark);
	slector.find(".mark3:last").append(option_mark);
	//changeイベント
	slector.find(".betClass:last").bind("change",betClass_change);
	//changeイベント
	slector.find(".wager:last").bind("blur",total);
	slector.find(".wager:last").attr("maxlength","3");
}

//登録ボタンクリック
function regTemp_click(e){
	query = {};
	query["betTemplate"] =$.toJSON(getInput("#betTemplate"));
	query["betTemplateBody"] =$.toJSON(getInputList(".betTemplateL"));
	query[REQKEY_COMMAND] = REQKEY_COMMAND_REGIST;
	b_ajax(url,query,setResponseData);
}

//デフォルト取得ボタンクリック
function searchTemp_click(e){
	query[REQKEY_COMMAND] = REQKEY_COMMAND_SEARCH;
	b_ajax(url,query,displayBetTmplate);
}

//クリアボタンクリック
function clearTemp_click(e){
	$(".betTemplateL").remove();
	total();
}

//種別変更イベント
function betClass_change(e){
	var target = $(this).parent();
	if($(this).val() === "2" || $(this).val() === "3"){
		$(".mark3",target).hide();
	}else{
		$(".mark3",target).show();			
	}
}

//表示
var displayBetTmplate = function(json){
	clearTemp_click();
	if(json["betTemplate"]){
		$("#name").val(json["betTemplate"]["name"]);
	}
	
	setTempLine("betTmpQuinellaArea",json["quinella"],betTemlateWLine);
	setTempLine("betTmpExactaArea",json["exacta"],betTemlateWLine);
	setTempLine("betTmpTrioArea",json["trio"],betTemlateTLine);
	setTempLine("betTmpTrifectaArea",json["trifecta"],betTemlateTLine);
	//合算
	total();
}

var setTempLine = function(area,array,line){
	for( data in array){
		$("#" + area).append(line);
		$(".mark1:last").append(option_mark);
		$(".mark2:last").append(option_mark);
		$(".mark3:last").append(option_mark);

		//changeイベント
		$(".wager:last").bind("blur",total);
		$(".wager:last").attr("maxlength","3");
		
		$(".wager:last").val(array[data]["wager"]);
		$(".betClass:last").val(array[data]["betClass"]);
		$(".mark1:last").val(array[data]["mark1"]);
		$(".mark2:last").val(array[data]["mark2"]);
		$(".mark3:last").val(array[data]["mark3"]);
	}
}
</script>
